.full-loading.hide {
  animation-delay: 2s;
  animation: hide 2s forwards;
}

@keyframes hide {
  from {
    opacity: 1;
    backdrop-filter: saturate(100%) blur(30px);
    z-index: 999;
  }

  to {
    opacity: 0;
    backdrop-filter: saturate(100%) blur(0px);
    z-index: -1;
  }
}



.full-loading {
  width: 100vw;
  position: fixed;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  z-index: -1;
  background-image: url('https://cdn.jsdelivr.net/gh/Redloney/CDN@1.5/static/img/wallhaven-9mrl7w.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    backdrop-filter: blur(5px);
    background-color: transparent;
    z-index: 5;
  }

  .content {
    z-index: 10;

    img {
      margin: 10px;
      width: 140px !important;
    }

    h2 {
      font-size: bold;
      font-size: 16px;
      color: #fff;
      font-family: oppo;
      text-align: center;
      position: relative;

      &::after {
        width: 100px;
        padding: 0 5px;
        content: '';
        color: #fff;
        animation: 1s load infinite alternate;
      }
    }

    @keyframes load {
      20% {
        content: '.';
      }

      60% {
        content: '..';

      }

      100% {
        content: '...';
      }
    }
  }
}